<template>
    <div class="house-earning">
        <div class="bg-blue">
            <div class="header-title">
                <span @click="$router.go(-1)" class="mint-toast-icon mintui mintui-back"></span>
                <span>收益明细</span>
                <span></span>
            </div>
            <div class="total-earning">
                <p>累计收益</p>
                <p v-show="false">(SGXC)</p>
                <p>6584615486</p>
            </div>
            <timeAndType :colorWhite = colorWhite></timeAndType>
        </div>
        <!-- 列表 -->
        <div class="scroll-range" v-show="true">
            <mt-loadmore
                :top-method="loadTop"
                :bottom-method="loadBottom"
                :bottom-all-loaded="allLoaded"
                :autoFill="false"
                ref="loadmore"
            >
                <div class="own-list">
                    <div class="earning-detail">
                        <div>
                            <p>收益</p>
                            <p>2019.06.28</p>
                        </div>
                        <div>
                            <span>+5,000</span>
                            <img src="../../assets/img/leiji.png" alt />
                        </div>
                    </div>
                    <div class="earning-detail">
                        <div>
                            <p>收益</p>
                            <p>2019.06.28</p>
                        </div>
                        <div>
                            <span>+5,000</span>
                            <img src="../../assets/img/leiji.png" alt />
                        </div>
                    </div>
                </div>
                <bgStatus v-show="false" :bgImg="bgImg" :bgWord="bgWord"></bgStatus>
            </mt-loadmore>
        </div>
        <!-- 暂无收益明细 -->
    </div>
</template>
<script>
import bgStatus from "../../components/bgStatus";
import timeAndType from '../../components/timeAndType'
export default {
    data() {
        return {
            //timeAndType的颜色
            colorWhite:"white",
            //暂无
            bgImg: require("../../assets/img/nonono.png"),
            bgWord: "暂无收益明细",
            //加载
            allLoaded: false, //数据是否加载完毕
            pageNum: 1
        };
    },
    components: {
        bgStatus,
        timeAndType
    },
    created() {},
    methods: {
        //下拉刷新
        loadTop() {
            setTimeout(res => {
                this.$refs.loadmore.onTopLoaded();
            }, 1500);
        },
        //上拉加载
        loadBottom() {
            this.pageNum++;
            setTimeout(res => {
                this.$refs.loadmore.onBottomLoaded();
            }, 1500);
        }
    }
};
</script>
<style lang="less" scoped>
.header-title {
    color: white;
}
.total-earning {
    color: @white;
    text-align: center;
    height: 20vh;
    padding: 30px 0;
    p {
        color: @white;
    }
    p:first-child {
        font-size: 15px;
        margin-bottom: 15px;
    }
    p:nth-child(2) {
        font-size: 12px;
        margin-bottom: 15px;
    }
    p:last-child {
        font-size: 25px;
    }
}
// 列表
.scroll-range {
    height: 60vh;
    width: 100%;
    background-color: @white;
    color: @blackColor5;
    .own-list {
        padding: 10px 18px 15px;
        .earning-detail {
            .flexBetweenCenter();
            font-size: 14px;
            color: @blueColor10;
            border-bottom: 1px solid @blackColor3;
            padding: 15px 0;
            div:nth-child(1) {
                p:nth-child(1) {
                    font-size: 12px;
                    color: @blackColor5;
                    margin-bottom: 12px;
                }
            }
            div:nth-child(2) {
                .flexStartCenter();
                img {
                    width: 12px;
                    margin-left: 15px;
                }
            }
        }
    }
}
</style>
